<template>
<div class="et-card-front">
  <div class="card et-card">
    <corner-mark :bg-color="theme.mainBg" :is-locked="isLocked" :initial="initial" />
    <div class="top-bar grid-x">
      <div class="small-6 cell"></div>
      <div class="small-6 cell">
        <div class="button-group">
          <func-btn v-for="(btn, idx) in funcBtns"
                    v-if="btn.shouldDisplay"
                    :key="idx"
                    :bg-color="theme.funcBtnBg"
                    :icon="btn.icon"
                    :handler="btn.handler" />
          <func-btn v-if="hasCardBack"
                    :bg-color="theme.funcBtnBg"
                    :icon="flipIcon"
                    :handler="flipHandler" />
        </div>
      </div>
    </div>
    <p class="text-center et-card-title">{{ title }}</p>
    <div class="et-card-btn-wrapper">
      <div class="grid-x text-center">
        <div class="cell small-6" v-for="btnCfg in opsBtns">
          <et-btn :classes="opsBtnClasses"
                  :styles="opsBtnStyles"
                  :icon="btnCfg.icon"
                  :txt="btnCfg.txt"
                  :handler="() => { btnHandler(btnCfg.handler) }"
                  :disabled="isLocked && enableLockBtn" />
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import CornerMark from './CornerMark';
import FuncBtn from './FuncBtn';
import { EtBtn } from '../../widgets';

export default {

  components: {
    CornerMark,
    FuncBtn,
    EtBtn
  },

  props: {
    id: {
      type: String,
      required: true
    },
    initial: {
      type: String,
      required: true
    },
    isLocked: {
      type: Boolean
    },
    title: {
      type: String,
      required: true
    },
    theme: {
      type: Object,
      required: true
    },
    hasCardBack: {
      type: Boolean
    },
    funcBtns: {
      type: Array,
      required: true
    },
    flipIcon: {
      type: String,
      default: 'more'
    },
    flipHandler: {
      type: Function,
      default: () => {}
    },
    opsBtns: {
      type: Array,
      required: true
    },
    enableLockBtn: {
      type: Boolean
    }
  },

  data() {
    return {
      opsBtnClasses: ['button', 'et-icon-btn']
    };
  },

  computed: {
    opsBtnStyles() {
      return {
        'background-color': this.theme.opsBtnBg
      };
    }
  },

  methods: {
    btnHandler(handler) {
      if (this.enableLockBtn && this.isLocked) {
        return;
      }
      handler(this.id);
    }
  }

};
</script>
